import React from "react"
import {
  View,
  Text,
  Image,
  TextInput,
  TouchableOpacity,
  ViewStyle,
  ImageStyle,
  TextStyle
} from "react-native"
import { images } from "../../assets"

interface InputProps {
  LeftIcon?: string // 左边icon
  LeftText?: string // 左边文字
  LeftIconStyle?: object // 左边Icon样式
  LeftTextStyle?: object // 左边文字样式，
  isOpenClear?: boolean // 是否开启右边清楚按钮
  isMsgInput?: boolean // 是否验证码输入框
  MsgDisable?: boolean // 验证码按钮是否禁用
  msgCodeText?: string // 验证码按钮文字
  MsgTextStyle?: object // 验证码文本样式
  MsgButtonStyle?: object // 验证码按钮样式
  MsgButtonDisabledStyle?: object // 验证码禁用时的按钮样式
  MsgTextDisabledStyle?: object // 验证码禁用时的文本样式
  isImageMsg?: boolean // 是否是图形验证码
  ImageButtonStyle?: object // 图形验证码样式
  ImageUri?: string // 图形验证码图片地址
  isBase64?: boolean // 是否是base64的图片
  style?: object // 输入框样式，
  textAligin?: string // 文本对其方式
  keyboardType?: string // 键盘类型
  maxLength?: number // 最大长度
  returnKeyType?: string // 键盘的弹出收回类型
  placeholder?: string // placeholder
  placeholderTextColor?: string // placeholder 颜色
  editable?: boolean // 是否禁用
  autoFocus?: boolean // 是否自动聚焦
  caretHidden?: boolean // 是否隐藏光标
  secureTextEntry?: boolean // 是否开启密码显示
  defaultValue?: string // 输入框默认值
  multiline?: boolean // 是否允许多行输入
  onChange?: () => void // 当文本框内容变化时调用此回调函数
  onBlur?: () => void // 当文本框失去焦点的时候调用此回调函数。
  onChangeText?: (any) => void // 当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
  onFocus?: () => void // 当文本框获得焦点的时候调用此回调函数。
  clear?: () => void // 清楚操作
  onPress?: () => void // 验证码的发送操作
  onPressImage?: () => void // 图形验证码的操作
  value?: string // 值
  leftImage?: any // 输入框左边图标
  isPassword?: boolean // 是否出现密码显示与隐藏
  isPasswordOpen?: boolean // 密码显示与隐藏状态
  changePasswordStyle?: () => void // 修改密码与隐藏
}

const styledInputView: ViewStyle = {
  height: 60,
  borderBottomColor: "#eeeeee",
  borderBottomWidth: 1,
  flexDirection: "row",
  alignItems: "center"
}

const styledTextInputStyle: TextStyle = {
  flex: 1,
  fontSize: 15,
  height: 60,
  padding: 0,
  textAlign: "left",
  marginLeft: 10
}

const styledListView: ViewStyle = {
  alignItems: "center",
  width: 20,
  height: 20
}

const styledLeftIcon: ImageStyle = {
  width: 20,
  height: 20
}

const styledLeftText: TextStyle = {
  fontSize: 15,
  color: "#333"
}

const styledMsgButton: ViewStyle = {
  width: 90,
  height: 35,
  alignItems: "center",
  justifyContent: "center"
}

const styledMsgText: TextStyle = {
  fontSize: 14,
  color: "#0149FF"
}

const styledMsgButtonDisabled: ViewStyle = {
  width: 90,
  height: 35,
  borderWidth: 1,
  borderColor: "#ccc",
  borderRadius: 4,
  backgroundColor: "#ccc"
}

const styledMsgTextDisabled: TextStyle = {
  fontSize: 14,
  color: "#fff"
}

const styledImageButton: ImageStyle = {
  width: 90,
  height: 35
}

export class Input extends React.Component<InputProps> {
  static defaultProps = {
    LeftIcon: "", // 左边icon
    LeftText: "",
    LeftIconStyle: "",
    LeftTextStyle: "",
    textAligin: "left",
    isOpenClear: false,
    style: {},
    keyboardType: "default",
    returnKeyType: "",
    placeholder: "请输入相关内容",
    placeholderTextColor: "#cccccc",
    editable: true, // 如果为fals文本不可编辑
    autoFocus: false,
    caretHidden: false,
    secureTextEntry: false,
    multiline: false,
    isMsgInput: false,
    MsgDisable: false,
    msgCodeText: "获取验证码",
    isImageMsg: false,
    MsgTextStyle: {},
    MsgButtonStyle: {},
    MsgButtonDisabledStyle: {},
    MsgTextDisabledStyle: {},
    ImageButtonStyle: {},
    ImageUri: "",
    isBase64: false
  }

  render() {
    const {
      LeftIcon,
      LeftText,
      LeftTextStyle,
      isOpenClear,
      style,
      maxLength,
      placeholder,
      placeholderTextColor,
      editable,
      autoFocus,
      caretHidden,
      secureTextEntry,
      defaultValue,
      multiline,
      onChange,
      onBlur,
      onChangeText,
      onFocus,
      clear,
      isMsgInput,
      msgCodeText,
      MsgTextStyle,
      MsgButtonStyle,
      MsgDisable,
      MsgButtonDisabledStyle,
      MsgTextDisabledStyle,
      isImageMsg,
      ImageButtonStyle,
      ImageUri,
      isBase64,
      onPress,
      onPressImage,
      value,
      leftImage,
      isPassword,
      isPasswordOpen,
      changePasswordStyle
    } = this.props

    const changeLeftStyle = LeftIcon ? { marginLeft: 5 } : null
    const baseImage = isBase64 ? `data:image/png;base64,${ImageUri}` : ImageUri // base64图片处理
    return (
      <View style={styledInputView}>
        <View style={styledListView}>
          <Image source={leftImage} style={[styledLeftIcon]} />
          <Text style={[styledLeftText, LeftTextStyle, changeLeftStyle]}>{LeftText}</Text>
        </View>
        <TextInput
          autoCapitalize={"none"}
          style={[styledTextInputStyle, style]}
          underlineColorAndroid="transparent"
          maxLength={maxLength}
          placeholder={placeholder}
          placeholderTextColor={placeholderTextColor}
          editable={editable}
          autoFocus={autoFocus}
          caretHidden={caretHidden}
          secureTextEntry={secureTextEntry}
          defaultValue={defaultValue}
          multiline={multiline}
          onChange={onChange}
          onBlur={onBlur}
          onChangeText={onChangeText}
          onFocus={onFocus}
          value={value}
        />
        {isOpenClear ? (
          <TouchableOpacity onPress={clear}>
            <Image
              source={images.login.icons.clear}
              style={{ width: 20, height: 20 }}
              resizeMode={"contain"}
            />
          </TouchableOpacity>
        ) : null}
        {isPassword ? (
          isPasswordOpen ? (
            <TouchableOpacity onPress={changePasswordStyle}>
              <Image
                source={images.login.icons.passwordEyeOpen}
                style={{ width: 20, height: 20 }}
                resizeMode={"contain"}
              />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity onPress={changePasswordStyle}>
              <Image
                source={images.login.icons.passwordEyeClose}
                style={{ width: 20, height: 20 }}
                resizeMode={"contain"}
              />
            </TouchableOpacity>
          )
        ) : null}
        {isMsgInput ? (
          MsgDisable ? (
            <View style={[styledMsgButtonDisabled, MsgButtonDisabledStyle]}>
              <Text style={[styledMsgTextDisabled, MsgTextDisabledStyle]}>{msgCodeText}</Text>
            </View>
          ) : (
            <TouchableOpacity
              style={[styledMsgButton, MsgButtonStyle]}
              onPress={() => {
                onPress
              }}
            >
              <Text style={[styledMsgText, MsgTextStyle]}>{msgCodeText}</Text>
            </TouchableOpacity>
          )
        ) : null}
        {isImageMsg ? (
          <TouchableOpacity
            style={[styledImageButton, ImageButtonStyle]}
            onPress={() => {
              onPressImage
            }}
          >
            <Image style={[styledImageButton, ImageButtonStyle]} source={{ uri: baseImage }} />
          </TouchableOpacity>
        ) : null}
      </View>
    )
  }
}
